<template>
	<up-sticky offsetTop="-1" bgColor="#fff">
		<Search isNavigate="true" path="/pages/searchPost/searchPost" />
		<up-tabs class="tabs" :list="list" lineWidth="30" lineColor="#d81e06" :activeStyle="{
				color: '#330c06',
				fontWeight: 'bold',
				transform: 'scale(1.05)',
				fontSize:'35upx'
			}" :inactiveStyle="{
				color: '#606266',
				transform: 'scale(1)',
				fontSize:'35upx'
			}" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" @change="changeType">
		</up-tabs>
	</up-sticky>
	<view v-if="type === 0" class="home">
		<!-- <up-waterfall v-model="flowList"> -->
		<Post :isEllipsis="true" />
		<!-- </up-waterfall> -->
		<!-- <up-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData"></up-loadmore> -->

	</view>
	<view v-else-if="type === 1" class="home">
		<template v-for="item in postList">
			<Post :isEllipsis="true" :post="item" />
		</template>
	</view>
	<view v-else class="home">
		<view class="topic">
			<view class="topic-container">
				<view class="topic-item" v-for="item in topic" @click="handleTopic(item)">
					<image class="topic-avatar" :src="item.avatar" mode="aspectFill"></image>
					<view class="topic-title">#{{item.topic_name}}</view>
					<view class="topic-hot">({{item.topic_popularity}})</view>
				</view>
			</view>
		</view>
	</view>
	<hover-button></hover-button>
</template>

<script lang="ts" name="Home" setup>
	import Search from '../../components/search/search.vue'
	import Post from '../../components/post/post.vue'
	import hoverButton from '../../components/hoverButton/hoverButton.vue'
	import { getConcern, getRecommend, getTopic } from '@/apis/home'
	import { ref, reactive, onMounted } from 'vue'
	const list = reactive([
		{ name: '关注' },
		{ name: '推荐' },
		{ name: '话题' },
	]);
	let type = ref(0)
	let loadStatus = ref("")
	let flowList = ref([])
	let postList = ref([])
	let topic = ref([])
	async function changeType(tabs) {
		if (type.value !== tabs.index) {
			type.value = tabs.index;
			if (type.value === 0) {
				// const res = await getConcern({page:1,pageSize:10})
			}
			if (type.value === 1) {
				init();
			}
			else {
				const { data } = await getTopic({ page: 1, pageSize: 10 })
				topic.value = data;
			}
		}

	}

	function handleTopic(index) {
		console.log(index.id);
	}
	onMounted(() => {
		// init();
	})


	async function init() {
		const { data } = await getRecommend({ page: 1, pageSize: 10 })
		postList.value = data;
	}
	// function addRandomData(){
	// 	for(let i = 0; i < 10; i++) {
	// 		let index = this.$u.random(0, postList.length - 1);
	// 		let item = JSON.parse(JSON.stringify(postList[index]))
	// 		item.id = this.$u.guid();
	// 		flowList.push(item);
	// 	}
	// }
	// function onReachBottom() {
	// 	loadStatus.value = 'loading';
	// 	// 模拟数据加载
	// 	setTimeout(() => {
	// 		addRandomData();
	// 		loadStatus.value = 'loadmore';
	// 	}, 1000)
	// }
</script>
// <script lang="ts">
	export default {
		onPullDownRefresh() {
			console.log('refresh');
		}
	};
</script>

<style scoped lang="scss">
	.tabs {
		display: flex;
		align-items: center;
	}

	.home {
		height: 100vh;
		background-color: white;
	}

	.topic {
		background-color: white;
		padding-top: 20upx;
		padding-left: 30upx;

		.topic-container {
			display: flex;
			flex-wrap: wrap;

			.topic-item {
				color: $primary;
				display: flex;
				margin-right: 30upx;
				border: 2upx solid $primary;
				background-color: rgba(216, 30, 6, 0.1);
				align-items: center;
				padding: 10upx 20upx 10upx 10upx;
				margin-bottom: 10upx;
				border-radius: 50upx;

				.topic-avatar {
					width: 50upx;
					height: 50upx;
					border-radius: 50%;
				}

				.topic-title {
					font-size: 30upx;
					margin: 0 10upx 0 10upx;
				}

				.topic-hot {
					font-size: 25upx;
					// font-size: 15upx;
				}
			}

		}


	}
</style>